<template>
  <div>
    <!--    <a-card style="border-radius:0px!important;">
          <span style="margin-left: 30px; margin-top:0px; font-size: 18px"
            > 广西水利工程建设项目管理信息系统 </span>
          <div style="float: right; width: 340px">
            <a-row
              :gutter="16"
              style="font-weight:500;margin-top: 18px; font-size: 18px"
            >
              <a-col :span="10" style="text-align: center;"> 现在有目：119 </a-col>
            </a-row>
          </div>
        </a-card>-->
    <page-layout>
      <a-row :gutter="[10, 10]">
        <a-col :xs="24" :lg="18" :xxl="18">
          <a-card title="项目进展">
            <a-row :gutter="[10, 10]">
              <a-col :xs="12" :sm="6" :md="6" :lg="3" :xl="3">
                <card-base color="rgb(105, 192, 255)" icon="BuildFilled" title="前期工作" ></card-base>
              </a-col>
<!--              <arrow-right-outlined :style="{fontSize: '20px', 'margin-top': '55px'}"/>-->
              <a-col :xs="12" :sm="6" :md="6" :lg="3" :xl="3">
                <card-base color="rgb(149, 222, 100)" icon="CloudFilled" title="投资下达、完成及支付"></card-base>
              </a-col>
<!--              <arrow-right-outlined :style="{fontSize: '20px', 'margin-top': '55px'}"/>-->
              <a-col :xs="12" :sm="6" :md="6" :lg="3" :xl="3">
                <card-base color="rgb(179, 127, 235)" icon="MailFilled" title="施工准备"></card-base>
              </a-col>
<!--              <arrow-right-outlined :style="{fontSize: '20px', 'margin-top': '55px'}"/>-->
              <a-col :xs="12" :sm="6" :md="6" :lg="3" :xl="3">
                <card-base color="rgb(92, 219, 211)" icon="SignalFilled" title="建设实施"></card-base>
              </a-col>
<!--              <arrow-right-outlined :style="{fontSize: '20px', 'margin-top': '55px'}"/>-->
              <a-col :xs="12" :sm="6" :md="6" :lg="3" :xl="3">
                <card-base color="rgb(255, 192, 105)" icon="CustomerServiceFilled" title="项目验收"></card-base>
              </a-col>
<!--              <arrow-right-outlined :style="{fontSize: '20px', 'margin-top': '55px'}"/>-->
              <a-col :xs="12" :sm="6" :md="6" :lg="3" :xl="3">
                <card-base color="rgb(255, 100, 50)" icon="BellFilled" title="专项管理"></card-base>
              </a-col>
              <a-col :xs="12" :sm="6" :md="6" :lg="3" :xl="3"></a-col>
              <a-col :xs="12" :sm="6" :md="6" :lg="3" :xl="3">
                <card-base color="rgb(105, 192, 255)" icon="SearchOutlined" title="辅助查询" @click="openSearch"></card-base>
              </a-col>
            </a-row>
            <a-row>
              <div class="steps" style="width: 75%;">
                <a-steps :current="1" size="small" type="navigation" status="process" :style="{'boxShadow': '0px -1px 0 0 #e8e8e8 inset'}">
                  <a-step>
                    <template v-slot:title>
                      前期工作
                    </template>
                  </a-step>
                  <a-step title="投资下达、完成及支付"></a-step>
                  <a-step title="施工准备"></a-step>
                  <a-step title="建设实施"></a-step>
                  <a-step title="项目验收"></a-step>
                  <a-step title="专项管理"></a-step>
                </a-steps>
              </div>
            </a-row>
          </a-card>
          <a-card title="通知公告" style="margin-top: 10px">
            <a-list item-layout="horizontal" :data-source="data">
              <template #renderItem="{ item }">
                <a-list-item>
                  <a-list-item-meta :description="item.info">
                    <template #title>
                      <a :href="item.avatar">{{ item.title }}</a>
                    </template>
                  </a-list-item-meta>
                </a-list-item>
              </template>
            </a-list>
          </a-card>
        </a-col>
        <a-col :xs="24" :lg="6" :xxl="6">
          <a-card title="待办事项">
            <a-timeline>
              <a-timeline-item color="red">
                <p>项目：桂平市城区河南防护治理工程</p>
                <p>投资下达文件及数据未上传</p>
              </a-timeline-item>
            </a-timeline>
          </a-card>
        </a-col>
      </a-row>
    </page-layout>
  </div>
  <page-footer></page-footer>
</template>
<script>
import {yjLists} from "@/api/module/commonProblem"
import $ from "jquery";

export default {
  setup() {
    const description = 'This is a description.';
    const data = [
      {
        avatar:
          "http://222.216.6.169:8080/gxsltpmp/wxnoticeInfo.action?notice.id=ff8080818917446e018920a108a74284",
        title: "山洪气象预警",
        info: "2023年07月04日16时广西水利厅和广西气象局联合发布山洪灾害气象预警"
      },
      {
        avatar:
          "http://222.216.6.169:8080/gxsltpmp/wxnoticeInfo.action?notice.id=ff8080818917446e018920a108a74284",
        title: "山洪气象预警",
        info: "2023年07月04日16时广西水利厅和广西气象局联合发布山洪灾害气象预警"
      },
      {
        avatar:
          "http://222.216.6.169:8080/gxsltpmp/wxnoticeInfo.action?notice.id=ff8080818917446e018920a108a74284",
        title: "山洪气象预警",
        info: "2023年07月04日16时广西水利厅和广西气象局联合发布山洪灾害气象预警"
      },
      {
        avatar:
          "http://222.216.6.169:8080/gxsltpmp/wxnoticeInfo.action?notice.id=ff8080818917446e018920a108a74284",
        title: "山洪气象预警",
        info: "2023年07月04日16时广西水利厅和广西气象局联合发布山洪灾害气象预警"
      },
      {
        avatar:
          "http://222.216.6.169:8080/gxsltpmp/weatherWarnInfo.action?",
        title: "天气气象预警",
        info: "广西壮族自治区气象台发布暴雨黄色预警[III级/较重]         2023-07-17"
      },
    ];

    return {
      data,
      description,
    };
  },
  methods:{
    openSearch(){
      // eslint-disable-next-line no-undef
      layer.open({
        title: '常见问题及要求辅助查询',
        type: 1,
        area: ['80%', '60%'],
        content: $("#fzcxDiv"),
        success: function(layero, index){
          // eslint-disable-next-line no-undef
          var demo1 = xmSelect.render({
            el: '#yjselect',
            tips: '请选择问题',//选项提示文字
            filterable: true,//搜索开启
            radio: true,//单选
            paging: true,//分页
            pageSize: 5,//分页条数
            clickClose: true,//点击后关闭
            model: {//展示模式
              icon: 'hidden',//隐藏所有图标
              label: {
                type: 'text'//只显示文字
              },
              type: 'relative', //默认 absolute 展开
            },
            template({ item, sels, name, value }){
              return '<span title="'+ item.xgfg.replaceAll("--", "\n") +'">'+ item.name +'</span>'
            },
            on: function(data){//监听事件
              if (0 < data.arr.length) {
                var list = data.arr;
                var yj = new Array();
                var yjnr = new Array();
                for (var i = 0; i < list.length; i++) {
                  yj.push(list[i].xgfg.replaceAll("--", "<br>") +"-+-");
                  yjnr.push(list[i].fgnr.replaceAll("--", "<br>"));
                }
                var temp = $.unique(yj).join(",");
                var ts;
                if(1 === data.arr.length){
                  ts = temp.replace("-+-", "");
                } else {
                  ts = temp.replaceAll("-+-,", "<br>");
                  ts = ts.replace("-+-", "");
                }
                $("#yiju").html(ts);
                $("#yijunrong").html($.unique(yjnr));
              } else {
                $("#yiju").html("");
                $("#yijunrong").html("");
              }
            },
          })

          var test = async () => {
            var response = await yjLists();
            let shujus = response.data.record;
            var ee = "";
            for (let i = 0; i < shujus.length; i++) {
              ee += '{"name": "'+ shujus[i].wtmshu +'", "value": "'+ shujus[i].wtmshu +'", "xgfg": "'+ shujus[i].xgfgbzhui +'", "fgnr": "'+ shujus[i].fgbznrong +'"},'
            }
            var eett = "["+ ee.substring(0, ee.length -1) +"]";
            demo1.update({
              data: JSON.parse(eett)
            })
            return {
              data: null,
            }
          }
          console.log(test())
        }
      })
    }
  }
};
</script>
<style>
.ant-list-item-meta-description {
  line-height: 28px;
}
</style>
